<template>
  <div id="vipIndex">
    <div :class="$style.topContainer" ref="vipIndexItems">
      <p class="zrjk__top" v-if="power === 1">
        <el-button
          v-for="item in admin.group"
          :key="item.value"
          :class="admin.selGid === item.value ?'active' : ''" @click="handleChangeGroup(item.value)"
          v-text="item.label">
        </el-button>
      </p>
      <el-collapse :value="curSelTopValue" @change="handleChangeItem" class="vipTopFilter">
        <el-collapse-item title="精确筛选" name="精确筛选">
          <el-row :gutter="24">
            <el-col :span="4">
              <span style="width:28%;text-align:right;float:left;line-height:28px;">用户名：</span>
              <el-input v-model="accurate.userName" placeholder="请输入用户名" style="width:45%" @keyup.enter.native="accurateClick"></el-input>
            </el-col>
            <el-col :span="4">
              <span style="width:28%;text-align:right;float:left;line-height:28px;">ID：</span>
              <el-input v-model="accurate.id" placeholder="请输入ID" style="width:45%" @keyup.enter.native="accurateClick"></el-input>
            </el-col>
            <el-col :span="4">
              <span style="width:28%;text-align:right;float:left;line-height:28px;">手机号：</span>
              <el-input v-model="accurate.phoneNumber" placeholder="请输入手机号" style="width:45%" @keyup.enter.native="accurateClick"></el-input>
            </el-col>
            <!-- <el-col :span="4">
              <span style="width:28%;text-align:right;float:left;line-height:28px;">真实姓名：</span>
              <el-input v-model="accurate.zsName" placeholder="请输入真实姓名" style="width:45%" @keyup.enter.native="accurateClick"></el-input>
            </el-col>
            <el-col :span="4">
              <span style="width:28%;text-align:right;float:left;line-height:28px;">身份证号：</span>
              <el-input v-model="accurate.sfzNumber" placeholder="请输入身份证号" style="width:65%" @keyup.enter.native="accurateClick"></el-input>
            </el-col> -->
            <el-col :span="4" :offset="3" style="margin-left:0">
              <el-button type="primary" @click="accurateClick" style="width:25%;" >搜索</el-button>
              <el-button type="primary" @click="accurateReset" style="width:25%;">重置</el-button>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="模糊筛选" name="模糊筛选">
          <el-row :gutter="20" style="margin-bottom:20px;">
            <el-col :span="6">
              <span style="float:left;text-align:right;width:28%">注册时间：</span>
              <el-date-picker v-model="vague.registerTime" type="daterange" style="width:55%;" placeholder="选择日期范围" @change="vagueClick">
              </el-date-picker>
            </el-col>
            <!-- 业务和回访 -->
            <el-col :span="6" v-if="cuGroup !== '答疑组' && cuGroup !== '质检组'">
              <span style="float:left;text-align:right;width:28%">联系时间：</span>
              <el-date-picker v-model="vague.relateTime" type="daterange" style="width:55%;" placeholder="选择日期范围" @change="vagueClick">
              </el-date-picker>
            </el-col>
            <el-col :span="6">
              <span style="float:left;text-align:right;width:28%">客户性质：</span>
              <el-select clearable v-model="vague.nature.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.nature.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" v-show='power!==3 && power!==4'>
              <span style="float:left;text-align:right;width:28%">选择客服：</span>
              <el-select clearable v-model="vague.choice.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.choice.options" :key="item.id" :label="item.UserName" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <!-- 答疑 -->
            <el-col :span="6" v-if="cuGroup === '答疑组'">
              <span style="float:left;text-align:right;width:28%">银行卡审核：</span>
              <el-select v-model="vague.yhk.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.yhk.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <!--  -->
            <!-- 质检 -->
            <el-col :span="6" v-if="cuGroup === '质检组'">
              <span style="float:left;text-align:right;width:28%">银行卡审核：</span>
              <el-select v-model="vague.yhk.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.yhk.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <!--  -->
          </el-row>
          <el-row :gutter="20" style="margin-bottom:20px;">
            <el-col :span="8" v-if="cuGroup === '回访组'">
              <span style="float:left;text-align:right;width:28%">待收：</span>
              <el-input v-model="vague.dl.startVal" style="margin:0 20px;width:30%;" @keyup.enter.native="vagueClick"></el-input>
              <el-input v-model="vague.dl.endVal" style="width:30%;" @keyup.enter.native="vagueClick"></el-input>
            </el-col>
            <el-col :span="6" v-if="cuGroup !== '回访组'">
              <span style="float:left;text-align:right;width:28%">账户状态：</span>
              <el-select clearable v-model="vague.state.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.state.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" v-if="cuGroup !== '回访组'">
              <span style="float:left;text-align:right;width:28%">收藏客户：</span>
              <el-select clearable v-model="vague.collection.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="(item,index) in vague.collection.options" :key="item.id" :label="item.bqName" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span style="float:left;text-align:right;width:28%">客户年龄：</span>
              <el-select clearable v-model="vague.age.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.age.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span style="float:left;text-align:right;width:28%">渠&nbsp;&nbsp;道&nbsp;&nbsp;号：</span>
              <el-input v-model="vague.qdNumber"  style="width:55%;" placeholder="请输入渠道号"  @keyup.enter.native="vagueClick"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-bottom:20px;">
            <el-col :span="6">
              <!-- 用户类型改成客户分类 -->
              <span style="float:left;text-align:right;width:28%">客户分类：</span>
              <el-select clearable v-model="vague.yhlx.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.yhlx.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" v-if="cuGroup !== '回访组'">
              <span style="float:left;text-align:right;width:28%">用户评分：</span>
              <el-select clearable v-model="vague.pf.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.pf.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" v-if="cuGroup === '回访组'">
              <span style="float:left;text-align:right;width:28%">投资时间：</span>
              <el-date-picker v-model="vague.investTime" type="daterange" style="width:55%;" placeholder="选择日期范围" @change="vagueClick">
              </el-date-picker>
            </el-col>
            <el-col :span="6" v-if="cuGroup === '回访组'">
              <span style="float:left;text-align:right;width:28%">转入时间：</span>
              <el-date-picker v-model="vague.inTime" type="daterange" style="width:55%;" placeholder="选择日期范围" @change="vagueClick">
              </el-date-picker>
            </el-col>
            <el-col :span="6">
              <span style="float:left;text-align:right;width:28%">联络情况：</span>
              <el-select clearable v-model="vague.situation.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.situation.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
             <el-col :span="6">
              <span style="float:left;text-align:right;width:28%">邀请人：</span>
              <el-select clearable v-model="vague.yaoqing.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.yaoqing.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="cuGroup === '回访组'">
            <el-col :span="6">
              <span style="float:left;text-align:right;width:28%">vip等级：</span>
              <el-select clearable v-model="vague.vip.value"  style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.vip.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" v-if="0">
              <span style="float:left;text-align:right;width:28%">清零时间：</span>
              <el-date-picker v-model="vague.qlTime" type="daterange" placeholder="选择日期范围" @change="vagueClick">
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="cuGroup === '业务组'" style="margin-bottom:0">
            <el-col :span="6">
              <span style="float:left;text-align:right;width:28%">剩余天数：</span>
              <!-- <el-select clearable v-model="vague.vip.value" style="width:55%;" placeholder="请选择" @change="vagueClick">
                <el-option v-for="item in vague.vip.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select> -->
              <el-input v-model="vague.dayNumber" style="width:55%;" placeholder="请输入剩余天数"  @keyup.enter.native="vagueClick"></el-input>
            </el-col>
            
          </el-row>
          
          <el-row :gutter="20" >
            <el-col :span="4" :offset="18" style="transform:translateX(-30px)">
              <el-button type="primary" @click="vagueClick" style="margin-left:43%; width:25%">搜索</el-button>
              <el-button type="primary" @click="vagueRest" style="width:25%;">重置</el-button>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div :class="[$style.tableContainer,cuGroup === '回访组'? $style.hfPdtop : '']" ref="vipIndexMT">
      <x-table :accurate="accurate" :vague="vague" ref="table" :PtTitle="tTitle" :Pgroup="cuGroup" :PgroupId="admin.selGid"></x-table>
    </div>
  </div>
  
</template>
<script>
import XTable from './components/table.vue'
import { stringTrim } from 'vux'
export default {
  components: {
    XTable
  },
  data() {
    // 只有业务和回访默认选择我客服，并且触发搜索
    const { userGroup, id, power } = this.$store.getters.getUserInfo
    // 非答疑组的组员和副组长都默认选中
    const vagueChoiceValue = (userGroup !== '答疑组' || userGroup !== '质检组') && (power === 3 || power === 5) ? id : ''

    // 初始化GID
    let admin = {
      selGid: 104,
      group: [    // 只有admin登录才会出现
        { label: '业务组', value: 104 },
        { label: '质检组', value: 40 },
        { label: '答疑组', value: 100 },
        { label: '回访组', value: 112 }
      ]
    }
    
    let gLabel = '业务组'
    if(power > 1){
      const groups = admin.group
      let gId
      groups.forEach(item => {
        if(item.label === userGroup){
           gId = item.value
           gLabel = item.label
        }
      })
      admin.selGid = gId
    }
    //
    // const curSelTopValue = gLabel === '业务组' ? ['精确筛选'] : ['模糊筛选']
    const curSelTopValue = ['模糊筛选']
    return {
      // 添加参数
      tTitle:'',
      curSelTopValue,
      admin,
      //
      power,
      //精确查询
      accurate: {
        userName: '',
        id: '',
        zsName:'',
        phoneNumber: '',
        sfzNumber: '',
      },
      //模糊查询
      vague: {
        // 增加的参数
        investTime: '',
        relateTime: '',
        inTime: '',
        dayNumber:'',
        dl:{
          startVal:'',
          endVal:'',
        },
        vip:{
          value:'',
          options:[
            {
              value:'0',
              label:'0'
            },
            {
              value:'1',
              label:'1'
            },
            {
              value:'2',
              label:'2'
            },
            {
              value:'3',
              label:'3'
            },
            {
              value:'4',
              label:'4'
            },
            {
              value:'5',
              label:'5'
            },
            {
              value:'6',
              label:'6'
            },
          ]
        },
        qlTime:'',
        //
        qdNumber: '',
        registerTime: '',
        maintainTime: '',
        remitTime: '',
        nameTime: '',
        shiftTime: '',
        biddingTime: '',
        classify: {
          value: '',
          options: [{
            value: '1',
            label: '回款客户'
          }]
        },
        nature: {
          value: '',
          options: [{
            value: '1',
            label: '首投30天内客户'
          }, {
            value: '2',
            label: '历史成功客户'
          }, {
            value: '3',
            label: '实名后30-60天未使用红包的客户'
          }, {
            value: '4',
            // label: '最近7天待还款的客户'
            label: '最近7天有首次本金回款用户',
          },{
            value: '5',
            label: '近15天未接通客户'
          },{
            value: '6',
            label: '30天未接通客户'
          }]
        },
        state: {
          value: '',
          options: [{
            value: '1',
            label: '已实名未投资'
          }, {
            value: '2',
            label: '未实名未投资'
          }, {
            value: '3',
            label: '投资50到5000'
          }, {
            value: '4',
            label: '充值50以上未投'
          }, {
            value: '5',
            label: '非充值1元用户'
          }, {
            value: '6',
            label: '未激活用户'
          },{
            value: '7',
            label: '站岗金额大于1000'
          },{
            value: '8',
            label: '2天内充值失败'
          },{
            value: '9',
            label: '2天内绑定失败'
          }
          ]
        },
        yaoqing:{
          value:'',
          options:[
            {
              value:1,
              label:'有'
            },
            {
              value:2,
              label:'无'
            }
          ]
        },
        situation: {
          value: '',
          options: [{
            value: 1,
            label: '未接通'
          },{
            value: 2,
            label: '接通'
          },{
            value: 3,
            label: '未拨打'
          },{
            value:4,
            label:'预约待回访'
          },
          {
            value:5,
            label:'有意向'
          },
          {
            value:6,
            label:'无意向'
          },
          {
            value:7,
            label:'意向不明确'
          }
          ]
        },
        collection: {
          value: '',
          options: [{
            value: '有轻微投资意向',
            label: '有轻微投资意向'
          }, {
            value: '有咨询意向',
            label: '有咨询意向'
          }]
        },
        age: {
          value: '',
          options: [{
            value: '1,23',
            label: '24岁以下'
          }, {
            value: '24,29',
            label: '24-29岁'
          }, {
            value: '30,49',
            label: '30-49岁'
          }, {
            value: '50,100',
            label: '50岁以上'
          }]
        },
        biddingStatus: {
          value: '',
          options: [{
            value: '0',
            label: '未审核'
          }, {
            value: '1',
            label: '被退回'
          }, {
            value: '2',
            label: '撤标'
          }, {
            value: '3',
            label: '招标中'
          }, {
            value: '4',
            label: '满标待审'
          }, {
            value: '5',
            label: '待还款'
          }, {
            value: '6',
            label: '已还完'
          }]
        },
        choice: {
          value: vagueChoiceValue,
          options: [{
            value: '',
            label: ''
          }]
        },
        type: {
          value: '',
          options: [{
            value: '5',
            label: '转贷宝'
          }, {
            value: '6',
            label: '温商宝'
          }, {
            value: '7',
            label: '新手标'
          }, {
            value: '8',
            label: '债券转让'
          }, {
            value: '9',
            label: '福利标'
          }, {
            value: '10',
            label: '个人借贷'
          }, {
            value: '11',
            label: '车车贷'
          }, {
            value: '12',
            label: '财智标'
          }, {
            value: '13',
            label: '保证金'
          }, {
            value: '15',
            label: '安存包'
          }, {
            value: '16',
            label: '商户通'
          }]
        },
        yhlx: {
          value: '',
          options: [{
            value: '0',
            label: '重要关怀客户'
          }, {
            value: '1',
            label: '重要保持客户'
          }, {
            value: '2',
            label: '重要挽留客户'
          }, {
            value: '3',
            label: '重要发展客户'
          }, {
            value: '4',
            label: '重要价值客户'
          }, {
            value: '5',
            label: '重要准流失客户'
          }, {
            value: '6',
            label: '重要流失客户'
          }, {
            value: '-1',
            label: '新客户'
          },{
            value: '7',
            label: '2017年未激活'
          },{
            value: '8',
            label: '2017年再投'
          },{
            value: '9',
            label: '2017年流水'
          }
          ]
        },
        pf: {
          value: '',
          options: [{
            value: '0,500',
            label: '>0'
          }, {
            value: '0,50',
            label: '0-50'
          }, {
            value: '50,70',
            label: '50-70'
          }, {
            value: '70,80',
            label: '70-80'
          }, {
            value: '80,100',
            label: '80-100'
          }, {
            value: '100,500',
            label: '100以上'
          }]
        },
        yhk:{
          value:'',
          options:[
            {value:'0',label:'待审核'},
            {value:'1',label:'已审核'},
            {value:'-1',label:'未通过'},
          ]
        }
      },
    }
  },
  computed: {
    cuGroup(){
      const gId = this.admin.selGid
      const groups = this.admin.group
      let selGroup
      groups.forEach(item => {
        if(item.value === gId){
          selGroup = item.label
        }
      })
      return selGroup
    },
    cuId() {
      return this.$store.getters.getUserInfo.id
    },
    userInfo() {
      return this.$store.getters.getUserInfo
    },
  },
  methods: {
    handleChangeGroup(gid){
      console.log(gid)
      this.admin.selGid = gid
    },
    handleChangeItem(val){
      this._toggleIndexItems(val)
    },
    _toggleIndexItems(val){
      // 由于要保证动画并发进行，所以不能等到折叠板进行完然后获取高度再来执行其他动画，因此通过预先得到高度来进行
      /**
       * 空=>0 打开一=>1 打开二=>2 打开一，二=>1,2
       * 以下为状态高度映射
       * 0 =>  109
       * 1 =>  201
       * 2 =>  348
       * 1,2 =>  370
      */
      const {power} = this.$store.getters.getUserInfo
      const powHeight = power < 2 ? 66 : 0
      let vitHeight
      let viMTEl = this.$refs['vipIndexMT']
      if(val.length === 0){
        vitHeight = 109
      }else if(val.length === 1){
        if(val[0] === '精确筛选'){
          vitHeight = 173
        }else if(val[0] === '模糊筛选'){
          vitHeight = this.cuGroup === '回访组'? 345 : 302
        }
      }else if(val.length === 2){
        vitHeight = this.cuGroup === '回访组'? 370 : 366
      }
      viMTEl.style.paddingTop = vitHeight + powHeight + 31 +15 + 'px'
      this.tTitle = vitHeight + powHeight + 50 + 'px'
    },
    accurateClick() {
      let {userName,id,phoneNumber,sfzNumber,zsName} = this.accurate
      console.log(this.accurate)
      if(userName === '' && id === '' && phoneNumber === '' && sfzNumber === '' && zsName===''){
        
        return this.$toast({
          message:'请输入筛选条件！'
        })
      }
      // 取空格处理
      this.accurate.userName = stringTrim(userName + '')
      this.accurate.id = stringTrim(id + '')
      this.accurate.phoneNumber = stringTrim(phoneNumber + '')
      this.accurate.sfzNumber = stringTrim(sfzNumber + '')
      this.$refs.table.getAccurateDate();
    },
    accurateReset() {
      this.accurate = {
        userName: '',
        id: '',
        phoneNumber: '',
        sfzNumber: '',
        qdNumber: '',
        zsName:''

      }
    },
    vagueClick(val) {
      // if(val === ''){
      //   return
      // }
      this.$refs.table.getVagueDate();
    },
    vagueRest() {
      this.vague.registerTime = '';
      this.vague.maintainTime = '';
      this.vague.remitTime = '';
      this.vague.nameTime = '';
      this.vague.shiftTime = '';
      this.vague.biddingTime = '';
      this.vague.classify.value = '';
      this.vague.nature.value = '';
      this.vague.state.value = '';
      this.vague.situation.value = '';
      this.vague.collection.value = '';
      this.vague.age.value = '';
      this.vague.yaoqing.value = '';
      this.vague.biddingStatus.value = '';
      //this.vague.choice.value = '';
      this.vague.type.value = '';
      this.vague.yhlx.value = '';
      this.vague.pf.value = '';
      this.vague.qdNumber = '';
      this.vague.yhk.value = ''
      // 回访组
      this.vague.investTime = ''
      this.vague.relateTime = ''
      this.vague.inTime = ''
      this.vague.dayNumber=''
      this.vague.dl.startVal = ''
      this.vague.dl.endVal = ''
      this.vague.vip.value = ''
    },
    getHelper() {
      this.$get(this, {
        api: 'manage/loadKfAll.do', data: {
          groupId: this.userInfo.userGroupId
        }
      }).then(({ data }) => {
        if (data.state === 0) {
          this.vague.choice.options = data.content;
          this.vagueClick()
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    getCustomer() {
      
      this.$get(this, {
        api: 'manage/loadBiaoqs.do', data: {
          kfid:this.$store.state.user.userInfo.id
        }
      }).then(({ data }) => {
        if (data.state === 0) {
          this.vague.collection.options = data.content[0];
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    customStyle() {
      this.$emit('onCustomStyle', {
        border: 'none',
        overflowY: 'scroll',
        background: '#fff'
      })
    },
  },
  activated(){
    this.customStyle()
  },
  mounted() {
    const { power,userGroup} = this.$store.getters.getUserInfo
    if(userGroup === '回访组'){
      const ta = Object.assign([],this.vague.yhlx.options)
      const ba = [
        {value:'150',label:'当月新人首次回款续投'},
        {value:'151',label:'当月复活用户'},
        {value:'152',label:'当月流失风险用户'},
        {value:'153',label:'当月流失用户'},
        {value:'154',label:'最近7天有首次本金回款用户'},
        {value:'155',label:'可用余额≥5000元且站岗5天以上用户'},
      ]
      this.vague.yhlx.options = [...ta,...ba]
    }
    // 初始化筛选条件的位置
    this._toggleIndexItems(this.curSelTopValue)

    this.customStyle()
    this.getCustomer()
    if (power === 1) {
      this.vague.choice.options = this.$store.getters.getKf
      // return
    }
    this.getHelper();
  }
}
</script>
<style lang="scss" module>
  .topContainer{
    position:fixed;
    left:250px;
    // right:75px;
    right:60px;
    z-index:1;
    background:#fff;
    max-height:350px;
    // height:350px;
    overflow:auto;
    padding-bottom:20px;
  }
  //
  .tableContainer{
    transition:padding-top .2s;
    will-change: padding-top;
    // padding-top:410px;
    // margin: 0 30px;
  }
 
  .hfPdtop{
    padding-top:402px;
  }
  //
  .accurate {
    border-bottom: 1px solid #dddfe6;
    box-sizing: border-box;
    padding: 10px 20px;
    font-size:14px;
  }
  .title {
    font-size: 16px;
    font-weight:500;
    margin-bottom: 10px;
  }
  .vague {
    padding: 10px 20px;
    padding-bottom:0;
    font-size:14px;
  }
</style>
<style lang="scss" scoped>
.zrjk__top {
  $btmBorderColor: #bac2cb;
  $btnDftBgColor: #ecf0f3;
  $btnDftColor: #bac2cb;
  $btnChgBgColor: #5394fc;
  $btnChgColor: #fff;
  padding: 20px 23px;
  // border: 1px solid $btmBorderColor;
  // border-bottom: none;
  border:none;
  background: $btnChgColor;
  // text-align: right;
  .el-button {
    padding: 11px 29px;
    color: $btnDftColor;
    background: $btnDftBgColor;
    border: none;
    transition: all .3s;
    &:hover {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
    &.active {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
  }
}

</style>

<style lang="scss">
#vipIndex{
  .el-input__inner{
    height:28px !important;
  }
  .el-button{
    padding:6px 15px !important;
  }
  .el-row{
    margin-bottom:15px !important;
  }
  .vipTopFilter .el-collapse-item__wrap{
    transition:height .2s;
  }
}

</style>
